/* 阿里巴巴图标库 */
@font-face {
    font-family: "iconfont"; /* Project id 3795172 */
    src: url('//at.alicdn.com/t/c/font_3795172_6hp27xdg2x7.woff2?t=1717673263031') format('woff2'),
    url('//at.alicdn.com/t/c/font_3795172_6hp27xdg2x7.woff?t=1717673263031') format('woff'),
    url('//at.alicdn.com/t/c/font_3795172_6hp27xdg2x7.ttf?t=1717673263031') format('truetype');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-website-with-different-sections:before {
    content: "\e60f";
}

.icon-compass:before {
    content: "\e68b";
}

.icon-minecraft:before {
    content: "\e7f9";
}

.icon-icons-left__dead_:before {
    content: "\f1ad";
}

.icon-server:before {
    content: "\f0ac";
}

.icon-rss-atom:before {
    content: "\e62b";
    color: #3E2AD1;
}


.icon-rss:before {
    content: "\e62b";
    color: #EE802F;
}

.icon-musicfill:before {
    content: "\e795";
}

.icon-note:before {
    content: "\e64f";
}

.icon-bars:before {
    content: "\e601";
}

.icon-tags:before {
    content: "\e715";
}

.icon-folder-open:before {
    content: "\e696";
}

.icon-gamepad:before {
    content: "\e69d";
}

.icon-clipboard:before {
    content: "\e602";
}

.icon-archive:before {
    content: "\e673";
}

.icon-comments:before {
    content: "\e600";
}

.icon-desktop:before {
    content: "\e603";
}

.icon-flask:before {
    content: "\e604";
}

.icon-hand-peace:before {
    content: "\e605";
}

.icon-heartbeat:before {
    content: "\e606";
}

.icon-home:before {
    content: "\e608";
}

.icon-id-card:before {
    content: "\e609";
}

.icon-images:before {
    content: "\e60a";
}

.icon-link:before {
    content: "\e60b";
}

.icon-paper-plane:before {
    content: "\e60e";
}

.icon-film_fill:before {
    content: "\e70f";
}

.icon-book-open:before {
    content: "\e8a3";
}

.icon-youxiang-:before {
    content: "\e6af";
    color: #1078D4;
}

.icon-qq:before {
    content: "\e60d";
    color: rgb(16, 164, 255);
}

.icon-wechat:before {
    content: "\e607";
    color: #00bf03;
}

.icon-gitee:before {
    content: "\e60c";
    color: #D90315;
}

/* 渐变背景色 */
[data-theme="light"]
body {
  background: linear-gradient(-45deg, #fbede8, #b4cef7, #b7f9b8, #f6ced8);
  background-size: 400% 400%;

  height: 100vh;
  background-attachment:fixed;
}

[data-theme="dark"]
body {
  background: linear-gradient(-45deg, #6f1b01, #113878, #016801, #540818);
  background-size: 400% 400%;

  height: 100vh;
  background-attachment:fixed;
}

/* 小康博客样式 */
#content-inner {
    --light_bg_color: hsla(0, 0%, 100%, .6);
    --dark_bg_color: hsla(0, 0%, 7%, .8);
    --light_page_color: hsla(0, 0%, 100%, .5);
    --dark_page_color: hsla(0, 0%, 7%, .8)
}

#aside-content .card-widget {
    background: var(--light_bg_color)
}

[data-theme=dark] #aside-content .card-widget {
    background: var(--dark_bg_color)
}

#footer {
    -webkit-backdrop-filter: saturate(100%) blur(5px);
    backdrop-filter: saturate(100%) blur(5px);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    color: #000
}

#footer,
#footer:before {
    background: hsla(0, 0%, 100%, .15)
}

#footer #footer-wrap,
#footer #footer-wrap a {
    color: #333
}

#web_bg {
    background: linear-gradient(90deg, rgba(247, 149, 51, .1), rgba(243, 112, 85, .1) 15%, rgba(239, 78, 123, .1) 30%, rgba(161, 102, 171, .1) 44%, rgba(80, 115, 184, .1) 58%, rgba(16, 152, 173, .1) 72%, rgba(7, 179, 155, .1) 86%, rgba(109, 186, 130, .1))
}

::-webkit-scrollbar {
    height: 4px;
    width: 4px
}

::-webkit-scrollbar-track {
    background-color: rgba(73, 177, 245, .2);
    border-radius: 2em
}

::-webkit-scrollbar-thumb {
    background-color: #49b1f5;
    background-image: -webkit-linear-gradient(45deg, hsla(0, 0%, 100%, .4) 25%, transparent 0, transparent 50%, hsla(0, 0%, 100%, .4) 0, hsla(0, 0%, 100%, .4) 75%, transparent 0, transparent);
    border-radius: 2em
}

::-webkit-scrollbar-corner {
    background-color: transparent
}

::-moz-selection {
    background-color: #49b1f5;
    color: #fff
}

#recent-posts>.recent-post-item,
.layout>div:first-child:not(.recent-posts),
.layout_post>#page,
.layout_post>#post,
.read-mode .layout_post>#post {
    background: var(--light_page_color)
}

[data-theme=dark] #recent-posts>.recent-post-item,
[data-theme=dark] .layout>div:first-child:not(.recent-posts),
[data-theme=dark] .layout_post>#page,
[data-theme=dark] .layout_post>#post,
[data-theme=dark] .read-mode .layout_post>#post {
    background: var(--dark_page_color)
}

#page h1.page-title,
#post>#post-info {
    text-align: center
}

.post #content-inner {
    font-size: 1.1em
}

.post .post-content h2,
.post .post-content h3,
.post .post-content h4,
.post .post-content h5,
.post .post-content h6 {
    cursor: pointer
}

.post .post-content h2:hover:before,
.post .post-content h3:hover:before,
.post .post-content h4:hover:before,
.post .post-content h5:hover:before,
.post .post-content h6:hover:before {
    color: #eb5055
}

#article-container .btns a:hover {
    text-decoration: none
}

#article-container .fancybox img {
    margin: 0
}

body {
    cursor: url(/static/cur/default.cur), default
}

a,
button,
img {
    cursor: url(/static/cur/pointer.cur), default
}

video {
    width: 100%
}

audio {
    outline: none
}

#article-container a[data-fancybox] {
    display: block;
    margin: auto;
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content
}

.aplayer .aplayer-lrc p {
    font-size: 12px;
    font-weight: 700;
    line-height: 16px !important
}

.aplayer .aplayer-lrc p.aplayer-lrc-current {
    color: #49b1f5;
    font-size: 15px
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
    left: -66px !important
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
    left: 0 !important
}

#article-container figure.highlight,
#article-container pre[class*=language-] {
    background: var(--hl-bg);
    color: var(--hl-color)
}

#article-container figure.highlight .highlight-tools {
    background: var(--hltools-bg);
    color: #a9a9a9
}

#article-container figure.highlight .highlight-tools .code-lang {
    font-size: .7rem;
    left: 50% !important;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

#article-container pre[class*=language-].line-numbers .line-numbers-rows>span:before {
    color: var(--hlnumber-color)
}

#article-container pre[class*=language-]::-webkit-scrollbar-thumb {
    background-color: #49b1f5 !important;
    background-image: -webkit-linear-gradient(45deg, hsla(0, 0%, 100%, .4) 25%, transparent 0, transparent 50%, hsla(0, 0%, 100%, .4) 0, hsla(0, 0%, 100%, .4) 75%, transparent 0, transparent) !important;
    border-radius: 2em !important
}

code[class*=language-],
pre[class*=language-] {
    word-wrap: normal;
    background: #fafafa;
    color: #90a4ae;
    font-family: Roboto Mono, monospace;
    font-size: 1em;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    line-height: 1.5em;
    tab-size: 4;
    text-align: left;
    white-space: pre;
    word-break: normal;
    word-spacing: normal
}

code[class*=language-] ::selection,
code[class*=language-]::selection,
pre[class*=language-] ::selection,
pre[class*=language-]::selection {
    background: #cceae7;
    color: #263238
}

:not(pre)>code[class*=language-] {
    border-radius: .2em;
    padding: .1em;
    white-space: normal
}

pre[class*=language-] {
    margin: .5em 0;
    overflow: auto;
    padding: 1.25em 1em;
    position: relative
}

.language-css>code,
.language-sass>code,
.language-scss>code {
    color: #f76d47
}

[class*=language-] .namespace {
    opacity: .7
}

.token.id,
.token.important {
    font-weight: 700
}

.token.atrule,
.token.boolean,
.token.constant,
.token.function,
.token.id,
.token.important,
.token.keyword,
.token.symbol {
    color: #7c4dff !important
}

.token.class-name,
.token.regex {
    color: #6182b8 !important
}

.token.hexcode,
.token.number,
.token.unit {
    color: #f76d47 !important
}

.token.comment,
.token.doctype,
.token.prolog {
    color: #aabfc9 !important
}

.token.attr-name,
.token.builtin,
.token.cdata,
.token.char,
.token.class,
.token.inserted,
.token.operator,
.token.property,
.token.punctuation {
    color: #39adb5 !important
}

.token.attr-value,
.token.attribute,
.token.pseudo-class,
.token.pseudo-element,
.token.string {
    color: #f6a434 !important
}

.token.deleted,
.token.entity,
.token.selector,
.token.tag,
.token.url,
.token.variable {
    color: #e53935 !important
}

.hide-block>.hide-button.open,
.hide-inline>.hide-button.open {
    display: block
}

p.red,
span.red {
    --Color: #e91e64;
    --ColorA: rgba(233, 30, 100, .2)
}

p.green,
span.green {
    --Color: #8bc34a;
    --ColorA: rgba(139, 195, 74, .2)
}

p.blue,
span.blue {
    --Color: #03a9f4;
    --ColorA: rgba(3, 169, 244, .2)
}

p.yellow,
span.yellow {
    --Color: #ffc107;
    --ColorA: rgba(255, 193, 7, .2)
}

p.grey,
span.grey {
    --Color: #4c4c4c;
    --ColorA: rgba(76, 76, 76, .2)
}

.font5 {
    background: #f6f6f6;
    border-left-color: #767676;
    display: block;
    font-weight: 500;
    line-height: 32px;
    text-align: left;
    width: 100%
}

span.inline-tag {
    background-color: var(--Color);
    border-radius: .1rem;
    border-radius: 6px;
    color: #fff;
    display: inline;
    font-size: 90%;
    font-weight: 400;
    line-height: 1;
    padding: .2em .6em .3em;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap
}

p.div-border {
    background-color: var(--ColorA, transparent);
    border: 1px solid var(--Color, #333);
    border-radius: .4rem;
    padding: 10px
}

p.left {
    border-left-color: var(--Color);
    border-left-width: 5px
}

p.bottom {
    border-bottom-color: var(--Color);
    border-bottom-width: 5px
}

p.right {
    border-right-color: var(--Color);
    border-right-width: 5px
}

p.top {
    border-top-color: var(--Color);
    border-top-width: 5px
}

#post a.link-card {
    align-items: center;
    background: var(--tab-botton-bg);
    border-radius: 8px;
    color: var(--tab-botton-color);
    cursor: pointer;
    display: inline-flex;
    font-size: .575rem;
    margin: .2rem;
    max-width: 361px;
    min-width: 200px;
    text-align: left;
    text-decoration: none
}

#post a.link-card:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1)
}

@media screen and (max-width:425px) {
    #post a.link-card {
        max-width: 100%
    }
}

@media screen and (max-width:375px) {
    #post a.link-card {
        width: 100%
    }
}

#post a.link-card div.left,
#post a.link-card div.right {
    pointer-events: none
}

#post a.link-card div.left {
    flex-shrink: 0;
    height: 48px;
    margin: 12px;
    overflow: hidden;
    position: relative;
    width: 48px
}

#post a.link-card div.left i {
    font-size: 32px;
    line-height: 48px;
    margin-left: 4px
}

#post a.link-card div.left img {
    border-radius: 8px;
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

#post a.link-card div.right {
    margin-right: 12px;
    overflow: hidden
}

#post a.link-card p {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

#post a.link-card p.text {
    font-weight: 700
}

#post a.link-card p.url {
    color: var(--search-input-color);
    flex-shrink: 0;
    font-size: .7125rem
}

#post del,
#post s {
    color: #999;
    -webkit-text-decoration-color: #999;
    text-decoration-color: #999
}

#post u {
    border-bottom: 1px solid #fe5f58;
    color: #444;
    text-decoration: none
}

#post emp {
    border-bottom: 4px dotted #fe5f58;
    color: #444
}

#post wavy {
    color: #444;
    -webkit-text-decoration-color: #fe5f58;
    text-decoration-color: #fe5f58;
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    -webkit-text-decoration-style: wavy;
    text-decoration-style: wavy
}

#post psw {
    background: #7f7f7f;
    border-radius: 2px;
    color: transparent;
    transition: all .28s ease
}

#post psw:hover {
    background: none;
    color: #555
}

#post kbd {
    background: var(--tab-button-active-bg);
    border: solid #d2d2d2;
    border-radius: 4px;
    border-width: 1px 1px 2px;
    color: var(--tab-botton-color);
    padding-left: 4px;
    padding-right: 4px
}

.checkbox {
    align-items: center;
    display: flex
}

.checkbox p {
    display: inline-block;
    margin-bottom: 0 !important;
    margin-top: 2px !important
}

.checkbox input {
    -webkit-appearance: none;
    -o-appearance: none;
    appearance: none;
    border: 2px solid #2196f3;
    border-radius: 2px;
    cursor: pointer;
    display: inline-block;
    flex-shrink: 0;
    height: 16px;
    margin-right: 8px;
    outline: 0;
    position: relative;
    transition: all .15s ease-out 0s;
    width: 16px
}

.checkbox input[type=checkbox]:before {
    background: #fff;
    content: "";
    height: 2px;
    left: 1px;
    position: absolute;
    top: 5px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transition: all .2s ease-in;
    width: 0
}

.checkbox input[type=checkbox]:after {
    background: #fff;
    bottom: 3px;
    content: "";
    height: 0;
    position: absolute;
    right: 7px;
    transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    transition: all .2s ease-out;
    transition-delay: .25s;
    width: 2px
}

.checkbox input[type=checkbox]:checked {
    background: #2196f3
}

.checkbox input[type=checkbox]:checked:before {
    height: 2px;
    left: 0;
    top: 7px;
    width: 6px
}

.checkbox input[type=checkbox]:checked:after {
    bottom: 1px;
    height: 10px;
    right: 3px;
    width: 2px
}

.checkbox input[type=radio] {
    border-radius: 50%
}

.checkbox input[type=radio]:before {
    border-radius: 50%;
    content: "";
    display: block;
    height: 8px;
    margin: 2px;
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: all .25s ease-out;
    width: 8px
}

.checkbox input[type=radio]:checked:before {
    background: #2196f3;
    -webkit-transform: scale(1);
    transform: scale(1)
}

.checkbox.minus input[type=checkbox]:after,
.checkbox.minus input[type=checkbox]:before {
    height: 2px;
    left: 1px;
    top: 5px;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    width: 0
}

.checkbox.minus input[type=checkbox]:checked:after,
.checkbox.minus input[type=checkbox]:checked:before {
    height: 2px;
    left: 1px;
    top: 5px;
    width: 10px
}

.checkbox.plus input[type=checkbox]:before {
    height: 2px;
    left: 1px;
    top: 5px;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    width: 0
}

.checkbox.plus input[type=checkbox]:after {
    height: 0;
    left: 5px;
    top: 1px;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    width: 2px
}

.checkbox.plus input[type=checkbox]:checked:before {
    height: 2px;
    left: 1px;
    top: 5px;
    width: 10px
}

.checkbox.plus input[type=checkbox]:checked:after {
    height: 10px;
    left: 5px;
    top: 1px;
    width: 2px
}

.checkbox.times input[type=checkbox]:before {
    height: 2px;
    left: 3px;
    top: 1px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 0
}

.checkbox.times input[type=checkbox]:after {
    height: 2px;
    right: 3px;
    top: 1px;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    width: 0
}

.checkbox.times input[type=checkbox]:checked:before {
    height: 2px;
    left: 1px;
    top: 5px;
    width: 10px
}

.checkbox.times input[type=checkbox]:checked:after {
    height: 2px;
    right: 1px;
    top: 5px;
    width: 10px
}

.checkbox.red input {
    border-color: #fe5f58
}

.checkbox.red input[type=checkbox]:checked,
.checkbox.red input[type=radio]:checked:before {
    background: #fe5f58
}

.checkbox.green input {
    border-color: #3dc550
}

.checkbox.green input[type=checkbox]:checked,
.checkbox.green input[type=radio]:checked:before {
    background: #3dc550
}

.checkbox.yellow input {
    border-color: #ffbd2b
}

.checkbox.yellow input[type=checkbox]:checked,
.checkbox.yellow input[type=radio]:checked:before {
    background: #ffbd2b
}

.checkbox.cyan input {
    border-color: #1bcdfc
}

.checkbox.cyan input[type=checkbox]:checked,
.checkbox.cyan input[type=radio]:checked:before {
    background: #1bcdfc
}

.checkbox.blue input {
    border-color: #2196f3
}

.checkbox.blue input[type=checkbox]:checked,
.checkbox.blue input[type=radio]:checked:before {
    background: #2196f3
}

div .btns {
    align-items: flex-start;
    color: #555;
    display: flex;
    flex-wrap: wrap;
    font-size: .8125rem;
    margin: 0 -8px;
    overflow: visible
}

div .btns a {
    align-content: center;
    align-items: center;
    background: #f6f6f6;
    border-radius: 4px;
    color: #555;
    display: flex;
    flex-direction: column;
    font-size: .8125rem;
    font-weight: 700;
    justify-content: flex-start;
    margin: 52px 8px 8px;
    min-width: 120px;
    padding: 8px;
    text-align: center
}

div .btns a,
div .btns a>i:first-child,
div .btns a>img:first-child {
    transition: all .28s ease;
    -moz-transition: all .28s ease;
    -webkit-transition: all .28s ease;
    -o-transition: all .28s ease
}

div .btns a>i:first-child,
div .btns a>img:first-child {
    background: #fff;
    border: 2px solid #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
    font-size: 28px;
    height: 64px;
    line-height: 60px;
    margin: -52px 8px 4px;
    width: 64px
}

div .btns a>i:first-child.auto,
div .btns a>img:first-child.auto {
    width: auto
}

div .btns a>i:first-child {
    background: #2196f3;
    color: #fff
}

div .btns a b,
div .btns a p {
    word-wrap: break-word;
    font-weight: 400;
    line-height: 1.25;
    margin: .25em
}

div .btns a b {
    font-weight: 700;
    line-height: 1.3
}

div .btns a img {
    margin: .4em auto
}

div .btns a:not([href]) {
    color: inherit;
    cursor: default
}

div .btns a[href]:hover {
    background: rgba(255, 87, 34, .15)
}

div .btns a[href]:hover i:first-child {
    background: #ff5722
}

div .btns a[href]:hover i:first-child,
div .btns a[href]:hover img:first-child {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1);
    -webkit-transform: scale(1.1) translateY(-8px);
    transform: scale(1.1) translateY(-8px)
}

div .btns a[href]:hover b {
    color: #ff5722
}

div .btns p {
    color: #555;
    font-size: .8125rem
}

div .btns b {
    font-size: .875rem
}

div .btns img {
    margin: 0 !important
}

div .btns.wide>a {
    padding-left: 32px;
    padding-right: 32px
}

div .btns.fill>a {
    flex-grow: 1;
    width: auto
}

div .btns.around {
    justify-content: space-around
}

div .btns.center {
    justify-content: center
}

div .btns.circle a i:first-child,
div .btns.circle a img:first-child {
    border-radius: 32px
}

div .btns.rounded a i:first-child,
div .btns.rounded a img:first-child {
    border-radius: 16px
}

div .btns.grid2>a {
    width: calc(50% - 16px)
}

@media screen and (max-width:1024px) {
    div .btns.grid2>a {
        width: calc(50% - 16px)
    }
}

@media screen and (max-width:768px) {
    div .btns.grid2>a {
        width: calc(50% - 16px)
    }
}

@media screen and (max-width:500px) {
    div .btns.grid2>a {
        width: calc(100% - 16px)
    }
}

div .btns.grid3>a {
    width: calc(33.33333% - 16px)
}

@media screen and (max-width:1024px) {
    div .btns.grid3>a {
        width: calc(33.33333% - 16px)
    }
}

@media screen and (max-width:768px) {
    div .btns.grid3>a {
        width: calc(33.33333% - 16px)
    }
}

@media screen and (max-width:500px) {
    div .btns.grid3>a {
        width: calc(100% - 16px)
    }
}

div .btns.grid4>a {
    width: calc(25% - 16px)
}

@media screen and (max-width:1024px) {
    div .btns.grid4>a {
        width: calc(33.33333% - 16px)
    }
}

@media screen and (max-width:768px) {
    div .btns.grid4>a {
        width: calc(33.33333% - 16px)
    }
}

@media screen and (max-width:500px) {
    div .btns.grid4>a {
        width: calc(50% - 16px)
    }
}

div .btns.grid5>a {
    width: calc(20% - 16px)
}

@media screen and (max-width:1024px) {
    div .btns.grid5>a {
        width: calc(25% - 16px)
    }
}

@media screen and (max-width:768px) {
    div .btns.grid5>a {
        width: calc(33.33333% - 16px)
    }
}

@media screen and (max-width:500px) {
    div .btns.grid5>a {
        width: calc(50% - 16px)
    }
}

div.tabs details {
    margin-bottom: .5rem;
    margin-top: .5rem
}

details {
    border: 1px solid #f6f6f6;
    border-radius: 4px;
    display: block;
    font-size: .7375rem;
    line-height: 1.3;
    margin: .5rem 0;
    padding: 16px;
    transition: all .28s ease;
    -moz-transition: all .28s ease;
    -webkit-transition: all .28s ease;
    -o-transition: all .28s ease
}

details>summary {
    border-radius: 4px;
    color: rgba(85, 85, 85, .7);
    cursor: pointer;
    font-size: .775rem;
    font-weight: 700;
    margin: -16px;
    padding: 16px !important;
    position: relative
}

details>summary>h1,
details>summary>h2,
details>summary>h3,
details>summary>h4,
details>summary>h5,
details>summary>h6,
details>summary>p {
    border-bottom: none;
    display: inline
}

details>summary:hover {
    color: #555
}

details>summary:hover:after {
    content: "";
    position: absolute;
    right: 16px;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

details>summary {
    background: #f6f6f6
}

details[blue] {
    border-color: #e8f4fd
}

details[blue]>summary {
    background: #e8f4fd
}

details[cyan] {
    border-color: #e8fafe
}

details[cyan]>summary {
    background: #e8fafe
}

details[green] {
    border-color: #ebf9ed
}

details[green]>summary {
    background: #ebf9ed
}

details[yellow] {
    border-color: #fff8e9
}

details[yellow]>summary {
    background: #fff8e9
}

details[red] {
    border-color: #feefee
}

details[red]>summary {
    background: #feefee
}

details[open] {
    border-color: rgba(85, 85, 85, .2)
}

details[open]>summary {
    border-bottom: 1px solid rgba(85, 85, 85, .2);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

details[open]>summary:hover:after {
    content: "-"
}

details[open][blue] {
    border-color: rgba(33, 150, 243, .3)
}

details[open][blue]>summary {
    border-bottom-color: rgba(33, 150, 243, .3)
}

details[open][cyan] {
    border-color: rgba(27, 205, 252, .3)
}

details[open][cyan]>summary {
    border-bottom-color: rgba(27, 205, 252, .3)
}

details[open][green] {
    border-color: rgba(61, 197, 80, .3)
}

details[open][green]>summary {
    border-bottom-color: rgba(61, 197, 80, .3)
}

details[open][yellow] {
    border-color: rgba(255, 189, 43, .3)
}

details[open][yellow]>summary {
    border-bottom-color: rgba(255, 189, 43, .3)
}

details[open][red] {
    border-color: rgba(254, 95, 88, .3)
}

details[open][red]>summary {
    border-bottom-color: rgba(254, 95, 88, .3)
}

details[open]>summary {
    color: #555;
    margin-bottom: 0
}

details[open]>div.content {
    margin: 0 -16px -16px;
    padding: 16px
}

details[open]>div.content>.fancybox:first-child,
details[open]>div.content>.highlight:first-child,
details[open]>div.content>.snote:first-child,
details[open]>div.content>.tabs:first-child,
details[open]>div.content>ol:first-child,
details[open]>div.content>p:first-child,
details[open]>div.content>ul:first-child {
    margin-top: 0
}

details[open]>div.content>.fancybox:last-child,
details[open]>div.content>.highlight:last-child,
details[open]>div.content>.snote:last-child,
details[open]>div.content>.tabs:last-child,
details[open]>div.content>ol:last-child,
details[open]>div.content>p:last-child,
details[open]>div.content>ul:last-child {
    margin-bottom: 0
}

div.gallery {
    margin: .5rem 0;
    overflow: hidden
}

div.gallery>.fancybox,
div.gallery>p>.fancybox {
    padding: 0;
    position: relative
}

div.gallery>.fancybox .image-caption,
div.gallery>p>.fancybox .image-caption {
    background: rgba(0, 0, 0, .3);
    bottom: 0;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    text-align: center;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    transition: all .3s ease;
    width: 100%
}

div.gallery>.fancybox .image-caption:empty,
div.gallery>p>.fancybox .image-caption:empty {
    display: none
}

div.gallery>.fancybox:hover .image-caption,
div.gallery>p>.fancybox:hover .image-caption {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

div.gallery,
div.gallery>p {
    align-items: center;
    align-items: stretch;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    padding: 0 !important
}

div.gallery[col]>p {
    flex-wrap: wrap;
    justify-content: flex-start
}

div.gallery[col="2"]>p>.fancybox {
    width: calc(50% - 2px)
}

div.gallery[col="3"]>p>.fancybox {
    width: calc(33.33% - 2px)
}

div.gallery[col="4"]>p>.fancybox {
    width: calc(25% - 2px)
}

div.gallery[col="5"]>p>.fancybox {
    width: calc(20% - 2px)
}

div.gallery[col="6"]>p>.fancybox {
    width: calc(16.66% - 2px)
}

div.gallery[col="7"]>p>.fancybox {
    width: calc(14.2857% - 2px)
}

div.gallery[col="8"]>p>.fancybox {
    width: calc(12.5% - 2px)
}

div.gallery>p {
    margin: 0
}

div.gallery.left,
div.gallery.left>p {
    justify-content: flex-start
}

div.gallery.center,
div.gallery.center>p {
    justify-content: center
}

div.gallery.right,
div.gallery.right>p {
    justify-content: flex-end
}

div.gallery.stretch,
div.gallery.stretch>p {
    align-items: stretch
}

div.gallery.stretch img,
div.gallery.stretch>p img {
    -webkit-transform: scale(1.5);
    transform: scale(1.5)
}

.fancybox {
    align-items: center;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    overflow: hidden;
    padding: 0 !important
}

@media screen and (max-width:500px) {
    .fancybox {
        border-radius: 1px
    }
}

.fancybox a {
    align-items: stretch;
    cursor: zoom-in;
    line-height: 0;
    margin: 0
}

.fancybox .gallery {
    overflow: hidden
}

.fancybox .image-caption {
    color: rgba(85, 85, 85, .65);
    font-size: .7125rem;
    padding-bottom: .4rem;
    padding-top: .4rem
}
